<template>
  <div>
    <avue-form class="dmptyFormButton" ref="form" v-model="model" :option="option"></avue-form>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </common-modal-template>
  </div>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
export default {
  components: {
    CommonModalTemplate
  },
  name: 'barcode-printer-template',
  props: {
    templateType: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '200'
    }
  },
  data() {
    return {
      model: {},
      //下拉选择
      option: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: this.labelWidth,
        column: [
          {
            type: 'search',
            label: '标签模板',
            prop: 'labelTemplateName',
            placeholder: '请选择 标签模板',
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: '请选择模板标签',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openLabelTemplateModal();
            }
          },
          {
            label: '打印机',
            prop: 'printersName',
            type: 'search',
            placeholder: '请选择 打印机',
            disabled: true,
            span: 24,
            rules: [
              {
                required: true,
                message: '请选择打印机',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openPrintersModal();
            }
          }
        ]
      },
      modalName: '',
      tableOption: {}, //公用模态框配置信息
      printInfo: {}, //打印机打印模版信息
      timer: new Date().getTime()
    };
  },
  created() {
    const fullPath = this.$route.fullPath;
    const printInfoStr = localStorage.getItem(fullPath);
    if (printInfoStr !== '{}') {
      const printInfo = JSON.parse(printInfoStr);
      const { printersName, printersId } = printInfo;
      this.model.printersId = printersId;
      this.model.printersName = printersName;
      this.printInfo.printersId = printersId;
      this.$emit('getPrintInfo', this.printInfo);
    }
  },
  methods: {
    /**
     * 获取打印机
     */
    openPrintersModal() {
      this.modalName = 'printersModal';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择打印机（双击进行选择）',
        url: '/api/mes-product/ems-equipment/page?type=PRINTER',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '打印机编码',
            prop: 'code',
            search: true,
            searchLabelWidth: 110
          },
          {
            label: '打印机名称',
            prop: 'name',
            search: true,
            searchLabelWidth: 110
          }
        ]
      };
    },
    /**
     * 打开标签模板模态框
     */
    openLabelTemplateModal() {
      this.modalName = 'labelTemplateModal';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择标签模版（双击进行选择）',
        url: `/api/mes-admin/labeltemplate/page?status=1&type=material&subTypeStr=accessories`,
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '大类',
            prop: 'type',
            type: 'select',
            dicData: [{ label: '物料', value: 'material' }]
          },
          {
            label: '小类',
            prop: 'subType',
            dicData: [
              { label: '原材料包装', value: 'raw_material_packaging' },
              { label: '辅料', value: 'accessories' }
            ],
            type: 'select',
            search: true
          },
          {
            label: '模版名称',
            prop: 'fileName',
            search: true
          },
          {
            label: '模版代码',
            prop: 'code',
            search: true
          },
          {
            label: '版本名称',
            prop: 'revision'
          },
          {
            label: '客户/供应商',
            prop: 'clientName'
          },
          {
            label: '缩略图',
            prop: 'thumbnailUrl'
          },
          {
            label: '标签地址',
            prop: 'fileUrl'
          },
          {
            label: '打印列数',
            prop: 'columnCount'
          },
          {
            label: '打印份数',
            prop: 'copies'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      };
    },
    /**
     * 获取选中打印机标签模版信息
     */
    getSelectedRows(rowData) {
      if (this.modalName === 'printersModal') {
        this.model.printersId = rowData.id;
        this.model.printersName = rowData.name;
        this.printInfo.printersId = rowData.id;
        const fullPath = this.$route.fullPath;
        localStorage.setItem(
          fullPath,
          JSON.stringify({
            printersName: rowData.name,
            printersId: rowData.id
          })
        );
        this.$emit('getPrintInfo', this.printInfo);
      } else if (this.modalName === 'labelTemplateModal') {
        this.model.labelTemplateId = rowData.id;
        this.model.labelTemplateId = rowData.id;
        this.model.labelTemplateName = rowData.fileName;
        this.printInfo.labelTemplateId = rowData.id;
        this.printInfo.dataId = rowData.dataId || '';
        this.$emit('getPrintInfo', this.printInfo);
      }
    },
    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    },
    reset() {
      this.$refs.form.resetFields();
      this.model = {};
    },
    setPrintLabel(id, name) {
      this.model.labelTemplateId = id;
      this.model.labelTemplateName = name;
    },
    setDefaultInfo(labelTemplateId, labelTemplateName, printersId, printersName) {
      this.model.labelTemplateId = labelTemplateId;
      this.model.labelTemplateName = labelTemplateName;
      this.model.printersId = printersId;
      this.model.printersName = printersName;
    }
  }
};
</script>
